<template>
	<view class="container">
		<com-head textTit="预约信息" :typeVal="1" :scrollTop="scrollTop"></com-head>
		
		
		<!-- 预约门店 -->
		<view class="plsTitle"><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>预约门店</view>
		<view class="reserveWrap">
			<view class="common" @click="selectStores()" >
				<view class="left">
					<view class="tit">预约门店</view>
					<view :class="!makeStoreInfo.id ? 'grey' : '' " class="tic">
						{{makeStoreInfo.id ? makeStoreInfo.title : "请选择门店"}}
					</view>
				</view>
				<u-icon name="arrow-right" color="#000" size="28"></u-icon>
			</view>
			<!-- <view class="reserveNumber">
				<view class="tag">注：超过5人团体客请致电门店进行预约</view>
				<view class="tit">预约人数</view>
				<view class="numList">
					<view class="num" @click="reserveNumber(ele,index)" :class="numActive == index ? 'active' : '' " v-for="(ele,index) in numList" :key="index">
						{{ele}}人
					</view>
				</view>
			</view> -->
			
			<!-- 预约技师 -->
			<view class="common btB">
				<view class="left">
					<view class="tit">预约技师</view>
					<view class="tic">
						<view class="list" v-if="makeTech.length" v-for="(ele,index) in makeTech" :key="index" @click="selectPersonal()">
							<text>{{ele.name}}（{{ele.number}}）</text>
						</view>
						<view class="list" v-if="!makeTech.length" @click="selectPersonal()">
							<text>请选择技师</text>
						</view>
					</view>
				</view>
				<u-icon name="arrow-right" color="#000" size="28"></u-icon>
			</view>
			
			<view class="common btB" @click="openF" >
				<view class="left">
					<view class="tit">预约时间</view>
					<view class="tic">
						{{times}}
					</view>
				</view>
				<u-icon name="arrow-right" color="#000" size="28"></u-icon>
			</view>
			
		</view>
		
		<!-- 预约项目 -->
		<view class="plsTitle"><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>预约项目</view>
		<view class="reserveWrap">
			<!-- @click="selectProject()" -->
			<view class="common" >
				<view class="left">
					<text class="tit">预约项目</text>
				</view>
				<!-- <u-icon name="arrow-right" color="#000" size="28"></u-icon> -->
			</view>
			<!-- <view class="common" v-for="(ele,index) in projectList" :key="index">
				<view class="left">
					<text>{{ele.name}} （{{ele.duration}}分钟）</text>
				</view>
				<text class="price" v-if="userInfo.vip_id <= 0">¥{{ele.price}}</text>
				<text class="price" v-else>¥{{ele.vip_price}}</text>
			</view> -->
			
			<view class="goods-box">
				<view class="goods" v-for="(ele,index) in projectList" :key="index">
					<image :src="ele.pic || ''" mode="aspectFill"></image>
					<view>
						<view class="t1">
							{{ele.name}}
						</view>
						<view class="tt">
							<view v-for="row in ele.tags">{{row.tags.name}}</view>
						</view>
						<view class="t2">
							<image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/shijian223.png"></image>
							{{ele.duration}}分钟
						</view>
						<view class="t2" v-if="ele.use_num">
							可用{{ele.use_num}}次
						</view>
						<view class="cuoClose"><u-icon name="close" color="#999999" size="20"></u-icon>1</view>
						<view class="price">
							<text v-if="is_single != 1"><text class="text">¥</text>{{ele.price}}</text>
							<text v-else><text class="text">¥</text>{{ele.single_price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 指定技师 -->
		<!-- <view class="plsTitle"><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>指定技师</view>
		<view class="technicianWrap">
			<view class="groupList">
				<view class="list" v-if="makeTech.length" v-for="(ele,index) in makeTech" :key="index" @click="selectPersonal()">
					<text>{{ele.name}}（{{ele.number}}）</text>
					<u-icon name="arrow-right" color="#000" size="28"></u-icon>
				</view>
				<view class="list" v-if="!makeTech.length" @click="selectPersonal()">
					<text>请选择技师</text>
					<u-icon name="arrow-right" color="#000" size="28"></u-icon>
				</view>
			</view>
		</view> -->
		
		
		<!-- {{makeName}} -->
		<!-- 联系人 -->
		<view class="plsTitle"><image src="//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/zuo.png"></image>联系人</view>
		<view class="linkman">
			<view class="list">
				<text class="tit">姓名</text>
				<input type="text"  v-model="name" placeholder="请输入" placeholder-class="color:#999999;font-size:24rpx;" class="pls"/>
			</view>
			<view class="list">
				<text class="tit">手机号</text>
				<input type="number" disabled="true" v-model="phone" placeholder="请输入" placeholder-class="color:#999999;font-size:24rpx" class="pls"/>
			</view>
		</view>
		
		<!-- <view @click="openF">232433dsfdsafdsaf</view> -->
		
		<view class="chioseTime" @click="chiose()">提交订单</view>
		
		<!-- 时间弹窗 -->
		<u-popup v-model="popShow" height="1000rpx" safe-area-inset-bottom mode="bottom" closeable="false" border-radius="40" @close="close">
			<view class="timerWrap">
				
				<view class="timerWrap-time">选择时间</view>
				<view class="dateList">
					<view class="list" v-for="(ele,index) in dateList" :key="index"
					@click="chioseDay(ele,index)">
					<view class="date" :class="dayActive == index ? 'dayActive' : ''">{{index == 0 ? '今天' : ele.week}}</view>
						<view class="dateTitle":class="dayActive == index ? 'dayActive' : ''">{{ele.date}}</view>
						<view class="borders" v-if="dayActive == index">  </view>
					</view>
				</view>
				<view class="chioseTimeList">
					<!-- ele.num == 0 ? 'full' : ''   || -->
					<!-- beBookedUp  订满 -->
					<view class="list" :class="ele.isCheck ? 'active' : ele.num == 0 ? 'full' : ''"
					@click="chioseTime(ele,index)"
					v-for="(ele,index) in list" :key="index">
						<view class="tit">{{ele.time}}</view>
						<view class="price">{{ele.price}}</view>
						<view class="status " v-if="ele.num == 0">已定满</view>
						<view class="status" v-if="ele.isCheck && ele.num != 0">已选中</view>
						<view class="status" v-if="!ele.isCheck && ele.num != 0">可预约</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	var util= require("@/common/utils.js")
	export default {
		data() {
			return {
				name:'',
				phone:'',
				form:{
					storeName:'请选择门店',
					number:'',
					item:'请选择项目'
				},
				numList:[1,2,3,4,5],
				numActive:-1,
				projectList:[],
				out_trade_no:'',
				times:'',
				dateList:[],
				dayActive:0,
				list:[],
				popShow: false,
				date:'',
				nodeTime:'',
				scrollTop: 0,
				isRec: ""
			}
		},
		onPageScroll(e){
			this.scrollTop = e.scrollTop
		},
		async onShow() {
			this.name = this.userInfo.realname || this.userInfo.username
			this.phone = this.userInfo.phone
			// 获取预约项目
			if(this.chioseProjects.length){
				this.projectList = [...this.chioseProjects,...this.makeProject]
			}else{
				this.projectList = [...this.makeProject]
			}
			// 选择人数高亮
			this.numList.forEach((ele,index)=>{
				if(ele == this.makeNum){
					this.numActive = index
				}
			})
			
			if (this.makeTech.length > 0) {
				this.times = ""
				this.$u.vuex("makeTime",'')
				this.$u.vuex("makeDays",'')
				this.list.forEach((ele,currIndex)=>{
					ele.isCheck = false
				})
			}
			// this.$refs.popup.open('bottom')
		},
		async onLoad({out_trade_no, isRec}){
			this.isRec = isRec
			if(out_trade_no){
				this.out_trade_no = out_trade_no
			}
			this.$u.vuex("makeNum", 1)
			
			let time = util.formatDate(new Date());
			let date=util.getDates(4, time);
			date.forEach((ele)=>{
				let time = ele.time.split('-')
				ele.date = time[1] +'-'+ time[2]
			})
			this.dateList = date
			this.stores_id = this.store_id
			this.date = this.dateList[0].time
			this.$u.vuex("makeDays",this.date)
			this.getTimeNode(0)
			let nodeTime = this.time(new Date(),1).split(":")
			this.nodeTime = nodeTime[0]*1*60 + nodeTime[1]*1
			
			
			// let time = util.formatDate(new Date());
			// let date = util.getDates(4, time);
			// date.forEach((ele)=>{
			// 	let time = ele.time.split('-')
			// 	ele.date = time[1] +'-'+ time[2]
			// })
			// this.dateList = date
			// this.getTimeNode(0)
			// let nodeTime = this.time(new Date(),1).split(":")
			// this.nodeTime = nodeTime[0]*1*60 + nodeTime[1]*1
			// console.log(nodeTime,this.nodeTime,"订单")
		},
		
		methods: {
			close() {
				this.popShow = false
			},
			openF(){
				this.popShow = true
			},
			time(date,type) {
				var y = date.getFullYear()
				var m = date.getMonth() + 1
				m = m < 10 ? '0' + m : m
				var d = date.getDate()
				d = d < 10 ? '0' + d : d
				var h = date.getHours()
				h = h < 10 ? '0' + h : h
				var minute = date.getMinutes()
				minute = minute < 10 ? '0' + minute : minute
				var second = date.getSeconds()
				second = second < 10 ? '0' + second : second
				if(type){
					return h + ':' + minute
				}else{
					return y + '-' + m + '-' + d
				}
			},
			async getTimeNode(index){
				this.list = []
				let staff_id = this.makeTech.length > 0 ? this.makeTech[0].id : ''
				let {data,code} = await this.$u.api.getTimeNode({store_id:this.makeStore_id,date:this.date, staff_id: staff_id });
				let arr = []
				data.forEach((ele)=>{
					ele.isCheck = false
					if(index == 0){
						let nodeTime = ele.time.split(":")
						ele.nodeTime = nodeTime[0]*1*60 + nodeTime[1]*1
						if(ele.nodeTime >this.nodeTime){
							arr.push(ele)
						}
					}else{
						arr.push(ele)
					}
				})
				// if(arr.length >= 16){
				// 	this.list = arr.slice(0,16)
				// }else{
					this.list = arr
				// }
				console.log(arr,"88888888888")
				// let nodeTime = this.time(new Date(),1).split(":")
				// this.nodeTime = nodeTime[0]*1*60 + nodeTime[1]*1
				// this.list = arr
				console.log(this.list,"订单")
			},
			chioseTime(ele,index){
				if (ele.num == 0) return
				this.list.forEach((ele,currIndex)=>{
					if(index != currIndex){
						ele.isCheck = false
					}
				})
				ele.isCheck = !ele.isCheck
				if(ele.isCheck){
					this.times = ele.time
					this.$u.vuex("makeTime",ele.time)
				}else{
					this.times = ""
					this.$u.vuex("makeTime",'')
				}
				
				this.popShow = false
				// if(ele.num == 0){
				// 	this.utlis.Toast("已预定满,请选择其他时间！")
				// }else{
					
				// }
			},
			// 选择日期
			chioseDay(ele,index){
				this.dayActive = index
				this.date = ele.time
				console.log(45111, this.date)
				this.$u.vuex("makeDays",this.date)
				this.getTimeNode(index)
				
			},
			selectPersonal(){
				// if(this.userInfo.vip_id < 1 ){
				// 	this.utlis.Toast("您还不是会员，暂不可预约技师！")
				// 	 return
				// }
				// if(!this.times){
				// 	this.utlis.Toast("请选择预约的时间点")
				// 	return
				// }
				this.utlis.goUrl(`/pages/mine/selectPersonal`)
			},
			selectStores(){
				if(this.out_trade_no)return
				this.utlis.goUrl(`/pages/mine/selectStores`)
			},
			// 选择预约项目
			selectProject(){
				if(this.out_trade_no)return
				this.utlis.goUrl(`/pages/reserve/selectProject`)
			},
			// 选择预约时间
			chiose(){
				if(!this.makeNum){
					this.$u.toast("请选择预约人数")
					return
				}
				if(!this.name){
					this.$u.toast("请输入预约姓名")
					return
				}
				// if(!this.makeTech.length){
				// 	this.$u.toast("请选择技师")
				// 	return
				// }
				
				if(!this.phone){
					this.$u.toast("请输入预约人手机号")
					return
				}else{
					let reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
					if (!reg.test(this.phone)) {
						this.$u.toast('手机号格式不正确')
						return false
					}
				}
				
				this.$u.vuex("makeName",this.name)
				this.$u.vuex("makePhone",this.phone)
				// this.utlis.goUrl(`/pages/reserve/selectTimer?order_num=${this.out_trade_no}`)
				let url = `/pages/reserve/confirmReseve?order_num=${this.order_num}`;
				if(this.isRec){
					url+=`&isRec=1`
				}
				this.utlis.goUrl(url)
			},
			reserveNumber(num,index){
				this.numActive = index
				this.$u.vuex("makeNum",num)
			}
		}
	}
</script>
<style lang="scss" scoped >
.plsTitle{
	font-size: 28rpx;
	color: #242833;
	line-height: 26rpx;
	margin-bottom: 32rpx;
	margin-top: 32rpx;
	font-weight: bold;
	image{
		width: 9rpx;
		height: 29rpx;
		position: relative;
		top: 5rpx;
		margin-right: 12rpx;
	}
}
.dayActive{
	color: #4D5562 !important;
}
.pls{
	text-align: right;
	flex: 1;
}
.container{
	padding: 50rpx 32rpx;
	.linkManTitle{
		font-size: 26rpx;
		color: #333333;
		line-height: 26rpx;
		padding: 40rpx 32rpx 32rpx 32rpx;
	}
	.linkman{
		background-color: #FFFFFF;
		border-radius: 8rpx;
		padding: 0 32rpx 4rpx 32rpx;
		.list{
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #ededed;
			height: 93rpx;
			.tit{
				width: 78rpx;
				color: #333333;
				font-size: 26rpx;
				margin-right: 55rpx;
			}
		}
		.list:last-child{
			border-bottom: 1rpx solid #FFFFFF;
		}
	}
	.reserveWrap{
		background-color: #FFFFFF;
		border-radius: 8rpx;
		padding: 0 32rpx 0 32rpx;
		.reserveNumber{
			padding: 20rpx 0 40rpx 0;
			// border-bottom: 1rpx solid rgba(142,142,142,.24);
			border-top: 1rpx solid rgba(142,142,142,.24);
			.tag{
				color: #D1B97E;
				margin-bottom: 25rpx;
				font-size: 26rpx;
			}
			.tit{
				font-size: 26rpx;
				color: #333333;
				line-height: 26rpx;
				margin-bottom: 35rpx;
			}
			.numList{
				display: flex;
				.num{
					width: 100rpx;
					line-height: 48rpx;
					background: #f6f6f6;
					border-radius: 4rpx;
					text-align: center;
					margin-right: 30rpx;
					color: #999999;
					font-size: 24rpx;
				}
				.active{
					background: linear-gradient(140deg,#f2e4a2 0%, #d1b87d);
					background-image: url('//jiudao123.oss-cn-shanghai.aliyuncs.com/store/img/bg10.png');
					background-repeat: no-repeat;
					background-size: cover;
					color: #007664;
				}
			}
		}
		.btB{
			border-top: 1rpx solid rgba(142,142,142,.24);
		}
		.common{
			height: 96rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// border-bottom: 1rpx solid rgba(142,142,142,.24);
			.price{
				color: #333333;
				font-size: 24rpx;
			}
			.left{
				color: #333333;
				font-size: 24rpx;
				display: flex;
				width: 100%;
				.tit{
					margin-right: 29rpx;
					font-size: 26rpx;
				}
				.grey{
					color: #999999;
				}
				.tic{
					flex: 1;
					// border: 1rpx solid;
					text-align: right;
					margin-right: 20rpx;
				}
			}
		}
	}
	
	.chioseTime{
		width: 686rpx;
		line-height: 96rpx;
		text-align: center;
		background: linear-gradient(140deg,#50DCC2 0%, #007664);
		border-radius: 48rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		margin: 60rpx 0;
	}
}

.timerWrap{
	// background: #ffffff;
	border-radius: 8rpx;
	padding: 50rpx 42rpx 0 38rpx;
	// min-height: 900rpx;
	// max-height: 1300rpx;
	// overflow-y: scroll;
	// border: 1rpx solid red;
	// border: 1rpx solid red;
	&-time{
		font-size: 32rpx;
		color: #393C42;
	}
	.dateList{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0 40rpx 0;
		.list{
			width: 120rpx;
			text-align: center;
			font-size: 24rpx;
			.dateTitle{
				color: #999999;
				margin-bottom: 16rpx;
			}
			.date{
				color: #999999;
			}
			.borders{
				width: 50rpx;
				padding: 0 30rpx;
				border-bottom: 4rpx solid #007664;
				margin: 0 auto;
			}
		}
	}
}

.chioseTimeList{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.list{
		width: 120rpx;
		border-radius: 4px;
		margin-right: 42rpx;
		text-align: center;
		background: #FFF7E8;
		margin-bottom: 42rpx;
		padding-top: 23rpx;
		.tit{
			color: #B99940;
			font-size: 30rpx;
		}
		.price{
			color: #B99940;
			opacity: 0.7;
			font-size: 24rpx;
			margin: 8rpx 0 12rpx 0;
		}
		.status{
			width: 120rpx;
			line-height: 35rpx;
			background: linear-gradient(135deg, #E5C372 0%, #F0E2A0);
			border-radius: 4rpx;
			color: #FFFFFF;
			font-size: 24rpx;
		}
	}
	.active{
		background-color: #D7FFF8;
		.tit{
			color: #007664;
		}
		.price{
			color: #007664;
		}
		.status{
			background: linear-gradient(140deg, #50DCC2 0%, #007664);
		}
	}
	// 订满
	.beBookedUp{
		background-color: #F4F4F4;
		.tit{
			color: #999999;
		}
		.price{
			color: #999999;
		}
		.status{
			background: #E2E2E2;
		}
	}
	.full{
		background-color: #F4F4F4;
		.tit{
			color: #999999;
		}
		.price{
			color: #999999;
		}
		.status{
			background: #E2E2E2;
		}
	}
	.list:nth-child(4n+4){
		margin-right: 0;
	}
}

.goods-box{
	// margin-top: 15rpx;
	padding-bottom: 1rpx;
	.goods{
		display: flex;
		margin-bottom: 30rpx;
		background: #ffffff;
		border-radius: 20rpx;
		// padding: 24rpx;
		position: relative;
		image{
			width: 188rpx;
			height: 188rpx;
			border-radius: 8rpx;
		}
		>view{
			flex: 1;
			// padding: 30rpx;
			// display: flex;
			// flex-direction: column;
			// justify-content: space-between;
			margin-left: 20rpx;
		}
		.cuoClose{
			position: absolute;
			bottom: 20rpx;
			right: 0rpx;
			font-size: 32rpx;
			color: #999999;
			u-icon{
				position: relative;
				top: -4rpx;
				margin-right: 10rpx;
			}
		}
		.t1{
			display: flex;
			font-size: 28rpx;
			font-weight: 400;
			text-align: left;
			color: #1D2129;
			line-height: 37rpx;
			width: 100%;
			white-space:nowrap; 
			overflow:hidden; 
			text-overflow:ellipsis;
			text{
				font-size: 20rpx;
				font-weight: 400;
				text-align: right;
				color: #999999;
				line-height: 28rpx;
			}
		}
		.tt{
			margin: 10rpx 0;
			view{
				display: inline-block;
				padding: 7rpx 12rpx;
				color: #E8C778;
				border: 1rpx solid #E8C778;
				font-size: 16rpx;
				margin-right: 20rpx;
			}
		}
		.t2{
			display: inline-block;
			padding: 5rpx 8rpx;
			border-radius: 6rpx;
			color: #E8BC88;
			font-size: 16rpx;
			text-align: center;
			background: linear-gradient(135deg, #2D3039 0%, #495057);
			margin-right: 15rpx;
			
			image{
				width: 16rpx;
				height: 16rpx;
				position: relative;
				top: 3rpx;
				margin-right: 10rpx;
			}
		}
		.price{
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			text{
				font-size: 32rpx;
				font-weight: 400;
				color: #007664;
				text-align: right;
				line-height: 33rpx;
				letter-spacing: 1px;
				.text{
					font-size: 26rpx;
				}
			}
			.make{
				font-size: 24rpx;
				font-weight: 400;
				color: #007664;
				line-height: 33rpx;
				letter-spacing: 1px;
				margin-right: 18rpx;
			}
			.buy{
				width: 93rpx;
				height: 49rpx;
				background: #d5bc81;
				border-radius: 8rpx;
				font-size: 24rpx;
				font-weight: 400;
				text-align: center;
				color: #ffffff;
				line-height: 49rpx;
				letter-spacing: 1px;
			}
		}
	}
	
}
	

.technicianWrap{
	.title{
		padding: 43rpx 0 30rpx 32rpx;
		color: #666666;
		font-size: 26rpx;
	}
	.groupList{
		background: #ffffff;
		border-radius: 8rpx;
		padding: 0 32rpx;
		.list{
			height: 94rpx;
			border-bottom: 1rpx solid rgba(142,142,142,.24);
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333333;
			font-size: 26rpx;
		}
		.list:last-child{
			border-bottom: 1rpx solid #FFFFFF;
		}
	}
}
	
</style>
<style >
page{
	background-color: #F6F7FA;
}
</style>
